<template>
  <el-scrollbar class="scrollbar">
    <div v-loading="loading" class="padding grid-content">
      <div class="search-form">
        <el-form inline>
          <el-form-item label="选择时间">
            <el-date-picker
              v-model="time" type="year" placeholder="选择年份"
              :clearable="false" value-format="yyyy"
              :picker-options="pickerOptions"
            ></el-date-picker>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" @click="clickSearch">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <grid-item-one
        style="margin-top: 0;" :data="gridItemOneData" @loadMore="loadMore"></grid-item-one>
      <grid-item-three v-if="gridItemThreeData" :data="gridItemThreeData"></grid-item-three>
    </div>
  </el-scrollbar>
</template>

<script>
import GridItemOne from './grid-item-one'
import GridItemThree from './grid-item-three'

import MixinGridItemOne from './mixin-grid-item-one';
import MixinGridItemThree from './mixin-grid-item-three';

import { getAreaCompanyEnergyConsumption } from '@/api/energyConsumption';
import { uuid, defaultNumber, restoreFormatNumber } from '@/utils';

export default {
  name: 'energy-efficiency-analysis-area',
  mixins: [MixinGridItemOne, MixinGridItemThree],
  components: {
    GridItemOne,
    GridItemThree
  },
  data () {
    return {
      loading: false,
      time: new Date().getFullYear() + '',
      timeType: '1y',
      pickerOptions: {
        disabledDate(date) {
          return date > new Date();
        }
      }
    };
  },
  mounted () {
    this.getAllData();
  },
  methods: {
    getParams () {
      return {
        time: this.time,
        timeType: this.timeType,
        areaProportion: '',
        comprehensiveEnergyConsumption: '',
      };
    },
    async getAllData () {
      this.loading = true;
      await this.getGridItemOneData();
      await this.getGridItemThreeData();
      this.loading = false;
    },
    clickSearch () {
      this.getAllData();
    },
    async loadTableMore (tree, treeNode) {
      const { COMPREHENSIVE_ENERGY_CONSUMPTION, proportion } = tree
      const areaCode = tree.districtCode;
      const params = this.getParams();
      return getAreaCompanyEnergyConsumption(areaCode, {
        ...params,
        areaProportion: proportion !== '-' ? proportion : 0,
        comprehensiveEnergyConsumption: COMPREHENSIVE_ENERGY_CONSUMPTION !== '-' ? restoreFormatNumber(COMPREHENSIVE_ENERGY_CONSUMPTION) : 0,
      });
    },
    loadMore(tree, treeNode, resolve) {
      this.loadTableMore(tree, treeNode)
        .then(res => {
          const keys = ['enterpriseCode', 'enterpriseId', 'enterpriseName'];
          (res.data.tbody || []).forEach(item => {
            Object.keys(item).forEach(key => {
              if (!keys.includes(key)) {
                item[key] = defaultNumber(item[key]);
              }
            })
          });
          resolve(
            (res.data.tbody || []).map(item => ({
              ...item,
              // 将企业名称显示出来
              districtName: item.enterpriseName,
              uuid: uuid()
            }))
          );
        })
        .catch(e => {
          console.warn(e);
          resolve([]);
        });
    }
  },
}
</script>

<style lang="scss" scoped>
  @import "@/assets/style/variable.scss";

  .grid-content {
    .content-block {
      margin-top: 1rem;
      background: white;
      border-radius: 4px;
      flex: 1;
    }
    ::v-deep .info-head {
      padding: 20px $gutter 0 $gutter;
      font-size: 16px;
    }
  }
</style>
